<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 100%;
		height: 100%;
		position: relative;
	}
	#a{
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
	}
	#b{
		width: 100px;
		height: 100px;
		background-color: cyan;
		position: absolute;
		left: 500px;
		top: 300px;
	}
	</style>
</head>
<body>
	<div>
		<div id="a"></div>
		<div id="b"></div>
	</div>
</body>
<script type="text/javascript">
	var a = document.getElementById('a');
	var b = document.getElementById('b');
		a.onmousedown = function(){
		 px = event.clientX-a.offsetLeft;
		 py = event.clientY-a.offsetTop;
		document.onmousemove = function(event){
			a.style.left = (event.clientX-px)+'px';
			a.style.top = (event.clientY-py)+'px';
			x= event.clientX-px;
			y=event.clientY-py;
			if (x >= 300 && y >= 100 && x <= 600 && y <= 400) {
				b.style.backgroundColor='yellow';
			}else{
				b.style.backgroundColor='cyan';
			}
		}
		document.onmouseup = function(){
				document.onmousemove = "";
			}
	}
</script>
</html>